<template>
  <div class="mod-password-body">
    <div>
    <p>旧密码:</p>
    <el-input placeholder="请输入内容" v-model="oldPassword" clearable></el-input>
    <p>新密码:</p>
    <el-input placeholder="请输入内容" v-model="newPassword" clearable></el-input>
    <p>确认新密码:</p>
    <el-input placeholder="请输入内容" v-model="confirmPassword" clearable></el-input>
    </div>
    <el-button type="primary" @click="changePassword">确认修改</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      oldPassword : '',
      newPassword : '',
      confirmPassword : '',
    }
  },

  methods: {
    async changePassword(){
      console.log(typeof(window.sessionStorage.getItem('userAccount')));
      if(this.newPassword !== this.confirmPassword){
        this.$message.error({
          message:'您两次输入的新密码不一致，请检查后重新操作'
        })
        return
      }

      const res = await this.$http.post('user/updataPassword',{
        userAccount : window.sessionStorage.getItem('userAccount'),
        oldPassword : this.oldPassword,
        newPassword : this.confirmPassword,
      })

      if( res.data.status === 0){
        this.$message({
          message:'密码更新成功！',
          type:'success'
        })
      }else{
        this.$message.error({
          message:res.data.message
        })
      }
    }
  },
}
</script>

<style>
.mod-password-body{
  width: 80%;
  height: 80%;
  background-color: white;
  margin-left:120px;
  margin-top: 80px;

  opacity: 1;
  border-radius : 20px;
}
.mod-password-body>div{
  width: 500px;
  margin-left: 300px;
  padding-top:100px;
}
.mod-password-body>div>p{
  font-size: 20px;
  margin-top: 50px;
}
.el-button{
  width: 140px;
  height: 40px;
  position: absolute;
  top: 600px;
  right: 900px;
}
</style>